<template>
  <scroll-view class="content">
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item
        v-for="image in communityList[communityIndex].banners"
        :key="image"
      >
        <img :src="image" style="width: 100%; height: 200px" />
      </van-swipe-item>
    </van-swipe>

    <div

      style="
        display: flex;
        flex-direction: row;
        padding-left: 20px;
        padding-top: 10px;
        transform: translate(0px, -200px);
        align-items: center;
      "
      @click="showPicker = true"
    >
      <img src="@/assets/qipao.png" style="width: 20px" />
      <div style="width: 5px"></div>
      <text style="color: white"
        >{{ communityList[communityIndex].text }}></text
      >
    </div>
    <van-popup v-model:show="showPicker" round position="bottom">
      <van-picker
        :columns="communityList"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>

    <div class="wrapper" style="transform: translate(0px, -100px)">
      <div style="display: flex; flex-direction: row; justify-content: center">
        <div class="modules" style="width: 100%; margin: 20px">
          <div
            class="modulesRow"
            v-for="(app, index) in spArr(appModules, 4, true)"
            :key="index"
          >
            <div v-for="(item, index2) in app" :key="index2">
              <div @click="goAppModule(item)" v-if="item && item.title">
                <img :src="item.icon" class="moduleAppIcon" />

                <div>
                  <text>{{ item.title }}</text>
                </div>
              </div>
              <div v-else class="moduleAppIcon"></div>
            </div>
          </div>
        </div>
      </div>

      <div
        style="
          padding-left: 18px;

          padding-right: 18px;
        "
      >
        <HomeTitleRow
          :more-link="'111'"
          :title="'热门活动'"
          :sub="'热门活动展示'"
        />
        <div style="height: 8px"></div>
        <div @click="onTapActivityCard">
          <HomeActivityCard
            :status="1"
            title="活动名称"
            time="2023年11月29日"
            activity-image="https://img.zcool.cn/community/012e285a1ea496a8012171323c6bf1.jpg@3000w_1l_0o_100sh.jpg"
          ></HomeActivityCard>
        </div>
        <HomeTitleRow
          :more-link="''"
          :title="'便民服务'"
          :sub="'有温度的智慧社区'"
        />
        <div style="height: 18px"></div>
        <div style="display: flex; flex-direction: row">
          <div class="card" style="flex-grow: 1; height: 160px">
            <ConvenienceServiceTexts
              title="洗护"
              :sub="'衣服便捷洗护 >'"
            ></ConvenienceServiceTexts>
            <div
              style="
                display: flex;
                flex-direction: row;
                justify-content: center;
              "
            >
              <img
                src="@/assets/washing-machine.png"
                style="height: 96px; width: 78px"
              />
            </div>
          </div>
          <div style="width: 10px"></div>
          <div style="flex-grow: 1">
            <div>
              <div class="card cardSmall">
                <ConvenienceServiceTexts
                  title="缝补"
                  :sub="'衣服便捷洗护 >'"
                ></ConvenienceServiceTexts>
                <img
                  src="@/assets/sewing.png"
                  style="width: 47px; height: 47px"
                />
              </div>
              <div style="height: 7px"></div>
              <div class="card cardSmall">
                <ConvenienceServiceTexts
                  title="理发"
                  :sub="'30分钟快剪理发 >'"
                ></ConvenienceServiceTexts>

                <img
                  src="@/assets/barber-shop.png"
                  style="width: 68px; height: 47px"
                />
              </div>
            </div>
          </div>
        </div>
        <!-- 自助消费开始 -->
        <HomeTitleRow
          :more-link="'222'"
          :title="'自助消费'"
          :sub="'咖啡馆自助消费'"
        />
        <div style="height: 8px"></div>
        <HomeActivityCard
          title="有一间咖啡"
          time="一家有温度的咖啡店"
          :activity-image="coffeeHouseImage"
        ></HomeActivityCard>
        <!-- 自助消费结束 -->
      </div>
    </div>
  </scroll-view>
</template>

<script lang="ts" setup>
import { ref, defineComponent } from 'vue'
import HomeTitleRow from '@/views/home/components/home-title-row.vue'
import HomeActivityCard from '@/views/home/components/home-activity-card.vue'
import ConvenienceServiceTexts from '@/views/home/components/convenience-service-texts.vue'
import storeIcon from '../../assets/ic_chaoshi.png'
import commonShare from '../../assets/ic_miaosha.png'
import convenienceServiceIcon from '../../assets/ic_jiuye.png'
import consumeIcon from '../../assets/ic_xinmeiti.png'
import govern from '../../assets/ic_zhengce.png'
import brand from '../../assets/ic_huodong.png'
import activity from '../../assets/ic_xinxi.png'
import router from '@/router/index'
import api from '@/api/index'
import { spArr } from '@/utils/array-utils'
import { showToast } from 'vant'
import coffeeHouseImage from '@/assets/coffee_house.png'
const showPicker = ref(false)
function onTapActivityCard() {
  // uni.navigateTo({
  //   url: '/views/activityPages/activity/activity-detail?id=1',
  // })
}
function onConfirm(e) {
  console.log(e)
  communityIndex.value = e.selectedIndexes[0]
  showPicker.value = false
}

function goAppModule(item) {
  if (!item || !item.path) {
    showToast('敬请期待')

    return
  }
  if (item.path.startsWith('http')) {
    api.getTmpToken().then((res) => {
      if (res.code == '200') {
        window.location.href =
          item.path +
          (item.path.indexOf('?') != -1 ? '&' : '?') +
          'tmpToken=' +
          res.data
      }
    })
  } else {
    router.push({ path: item.path, query: item.query })
  }
  // if (item.title === '活动预约') {
  //   uni.switchTab({
  //     url: item.path,
  //   })
  // } else if (item.title === '政务服务') {
  //   uni.navigateTo({
  //     url: item.path,
  //   })
  // } else {
  //   uni.navigateTo({
  //     url: item.path,
  //     fail(result) {
  //       uni.showToast({
  //         title: '敬请期待',
  //         icon: 'none',
  //       })
  //     },
  //   })
  // }
}
const communityList = ref([
  {
    text: '金象花园社区',
    value: '金象花园社区',
    banners: [
      'https://ts1.cn.mm.bing.net/th/id/R-C.be4f564495a8810e69a177b9b830885e?rik=xype13PPC4wuMw&riu=http%3a%2f%2fd.hiphotos.baidu.com%2fzhidao%2fpic%2fitem%2f3b87e950352ac65c1b6a0042f9f2b21193138a97.jpg&ehk=hWskA5MIyB3nz2a7kGvXoTP3hhLq5FQgWhbxrJEfJJI%3d&risl=&pid=ImgRaw&r=0',
      'https://ts1.cn.mm.bing.net/th/id/R-C.15e970cd0765096178a6da16993cfbb1?rik=IT5KfevidZcTig&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1210%2f22%2fc0%2f14558824_1350879506501.jpg&ehk=X9ro%2fg%2fGTmsglVrbV%2bmy8c3wsAvcHseqcEhsf80RMWA%3d&risl=&pid=ImgRaw&r=0',
      'https://ts1.cn.mm.bing.net/th/id/R-C.d2c32212589206daf26530681c552985?rik=eKcHGxsJYl17RQ&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f45%2f6745.jpg&ehk=NmOT%2b0lr4WTqJcdT%2f0pzN4cgHQgE8KLJzAnUvSGyQbw%3d&risl=&pid=ImgRaw&r=0',
    ],
  },
  {
    text: '晨辉社区',
    value: '晨辉社区',
    banners: [
      'https://ts1.cn.mm.bing.net/th/id/R-C.3e42ad7c7744a7a612bfbaa480405611?rik=eX46Dun%2fFF1aDg&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f25%2f6125.jpg&ehk=ukEQFHgNgClnZxjkosi%2bP3OoaZicxvcitCFcgJISxww%3d&risl=&pid=ImgRaw&r=0',
      'https://ts1.cn.mm.bing.net/th/id/R-C.fe97a95159f97c5dbc52e46cebd83ea4?rik=F9yvG21Ar75WLg&riu=http%3a%2f%2fg.hiphotos.baidu.com%2fzhidao%2fpic%2fitem%2f54fbb2fb43166d22b95d61f4472309f79052d2ac.jpg&ehk=DO%2fgbhnI4JtawIUkz0Sm4oIEY0WjX%2bWtzuMNP2soDAc%3d&risl=&pid=ImgRaw&r=0',
      'https://ts1.cn.mm.bing.net/th/id/R-C.fbc6c147e04c3e11ef3deb0fe55c6825?rik=%2fLl5ZkdmkROKjA&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f16%2f4816.jpg&ehk=NofvLrCJlqCuuJ85k3BdXXbf99fXPwswgPh9Gpu1IsI%3d&risl=&pid=ImgRaw&r=0',
    ],
  },
  {
    text: '锦华社区',
    value: '锦华社区',
    banners: [
      'https://ts1.cn.mm.bing.net/th/id/R-C.20cc3836a46a1d7d8cefccb34ec1eed5?rik=Kq9%2bDjBZ1ZN5pg&riu=http%3a%2f%2fsc.68design.net%2fqita7%2fHDR%2fimages%2fHDR-009001.jpg&ehk=2oJs4fa%2fgAKXCRPMiT5MO6kQhNbu2xLsCNtWIV4WW6w%3d&risl=&pid=ImgRaw&r=0',
      'https://pic.ntimg.cn/file/20200316/3018779_153021626082_2.jpg',
      'https://ts1.cn.mm.bing.net/th/id/R-C.460b2263b5fb251d8212123b89b18d27?rik=1Lrh9C7EWKER3Q&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f71%2f8371.jpg&ehk=ssJYUgT%2bfsnfLSC0OM%2foenLpX4EntCm99MvfRvh%2fqrQ%3d&risl=&pid=ImgRaw&r=0',
    ],
  },
])

const communityIndex = ref(0)
const count = ref(0)
// const { windowWidth, windowHeight, statusBarHeight } =
//   uni.getSystemInfoSync()
const appModules = [
  {
    title: '社区商店',
    icon: storeIcon,
    path: 'https://h5.028wlkj.com/#/mainSite/1/?cooperation=1',
  },
  {
    title: '共享预约',
    icon: commonShare,
    path: '/views/activityPages/office-share/common-share',
  },
  {
    title: '便民服务',
    icon: convenienceServiceIcon,
    path: '/mainPages/convenientservices/index',
  },
  {
    title: '自助消费',
    icon: consumeIcon,
    path: '',
  },
  {
    title: '政务服务',
    icon: govern,
    path: '/mainPages/governmentservices/index',
  },
  {
    title: '品牌',
    icon: brand,
    path: '/mainPages/brand/index',
  },
  {
    title: '活动预约',
    icon: activity,
    path: '/result/list',
    query: { type: 'attractionTickets' },
  },
]
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  // align-items: center;
  // justify-content: center;
  background-color: #f5f5f5;
  .wrapper {
    width: 100%;
    // padding-left: 18px;
    // padding-right: 18px;
  }
  .logo {
    width: 200rpx;
    height: 200rpx;
    margin: 50rpx auto;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    color: #8f8f94;
    font-size: 36rpx;
  }
  .parentDiv {
    // position: relative;
    // .banner {
    //     position: absolute;
    //     z-index: 1;
    // }
  }
  .modules {
    // width: 354px;
    height: 188px;

    line-height: 20px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: center;
    font-family: Roboto;
    justify-content: space-around;
    display: flex;
    flex-direction: column;

    .modulesRow {
      display: flex;
      flex-direction: row;
      justify-content: space-around;

      .moduleAppIcon {
        width: 50px;
        height: 50px;
        line-height: 20px;

        text-align: center;
        border-radius: 999px;
      }
    }
  }

  .card {
    background-color: white;
    border-radius: 10px;
    padding: 8px;
    box-sizing: border-box; //设置padding不增加高度
  }
  .cardSmall {
    display: flex;
    flex-direction: row;
    height: 76px;

    justify-content: space-between;
  }
}
</style>
